<template>
	<div class="allDiv">
		<el-card class="box-card">
			<el-form ref="queryForm" :model="queryParams" label-width="100px">
				<el-row :gutter="24" style="margin-top: 20px">
					<el-col :span="4"
						><div class="grid-content bg-purple">
							<el-form-item label="标题：" prop="title">
								<el-input v-model.trim="queryParams.title" placeholder="请输入标题"></el-input>
							</el-form-item></div
					></el-col>
					<el-col :span="4"
						><div class="grid-content bg-purple">
							<el-form-item label="状态：" prop="status">
								<el-select v-model.trim="queryParams.status" placeholder="请选择" style="width: 200px">
									<el-option label="上架" value="1401"> </el-option>
									<el-option label="下架" value="1301"> </el-option>
								</el-select>
							</el-form-item></div
					></el-col>
					<el-col :span="5"
						><div class="grid-content bg-purple">
							<el-form-item label="类型：" prop="classifyId">
								<el-select v-model.trim="queryParams.classifyId" placeholder="请选择" style="width: 200px">
									<el-option v-for="item in classifyOptions" :key="item.objId" :label="item.name" :value="item.objId"> </el-option>
								</el-select>
							</el-form-item></div
					></el-col>
					<el-col :span="7"
						><div class="grid-content bg-purple">
							<el-form-item label="创建时间：">
								<el-date-picker v-model.trim="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
							</el-form-item></div
					></el-col>
					<el-col :span="4"
						><div class="grid-content bg-purple">
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>搜索表格</span>
				<div class="cardButton">
					<el-button type="primary" @click="showArticleClassify">资讯分类</el-button>
					<el-button type="success" @click="showReleaseArtcle">发布资讯</el-button>
					<el-button type="info" @click="showUploadAttachments">附件上传</el-button>
					<i class="el-icon-refresh-right icon"></i>
					<i class="el-icon-setting icon"></i>
				</div>
			</div>
			<el-table v-loading="loading" stripe :data="userList" @selection-change="handleSelectionChange">
				<el-table-column :formatter="emptyToString" type="selection" width="50" align="center" />
				<el-table-column v-if="columns[0].visible" key="objId" :formatter="emptyToString" label="编号" align="center" prop="objId" />
				<el-table-column v-if="columns[1].visible" key="classifyName" :formatter="emptyToString" label="分类" align="center" prop="classifyName" :show-overflow-tooltip="true" />
				<el-table-column v-if="columns[2].visible" key="title" :formatter="emptyToString" label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
				<el-table-column v-if="columns[3].visible" key="reviewStatus" :formatter="emptyToString" label="状态" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<div class="circle" :style="scope.row.reviewStatus == '1401' ? 'background-color: #409EFF;' : 'background-color: #909399;'"></div>
						<span>{{ scope.row.reviewStatus == '1401' ? '上架' : '下架' }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="columns[4].visible" key="numVisit" :formatter="emptyToString" label="访问量" align="center" prop="numVisit" width="120" />
				<el-table-column v-if="columns[5].visible" key="sortNum" :formatter="emptyToString" label="显示顺序" align="center" prop="sortNum" />
				<el-table-column v-if="columns[6].visible" key="author" :formatter="emptyToString" label="作者" align="center" prop="author" />
				<el-table-column v-if="columns[7].visible" :formatter="emptyToString" label="创建时间" align="center" prop="createTime" width="160"> </el-table-column>
				<el-table-column v-if="columns[8].visible" :formatter="emptyToString" label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
					<template slot-scope="scope">
						<el-button v-hasPermi="['system:user:resetPwd']" size="mini" type="text" icon="el-icon-search" @click="handleResetPwd(scope.row)">查看评论</el-button>
						<el-button v-hasPermi="['system:user:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
						<el-button v-if="scope.row.userId !== 1" v-hasPermi="['system:user:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getListData"
		/></el-card>
		<ArticleClassify ref="ArticleClassify"></ArticleClassify>
		<UploadAttachments ref="UploadAttachments"></UploadAttachments>
	</div>
</template>
<script>
import { listData, classifyData } from '@/api/mall/article';
import ArticleClassify from './profile/articleClassify.vue';
import UploadAttachments from './profile/uploadAttachments.vue';
export default {
	components: { ArticleClassify, UploadAttachments },
	props: ['dialogVisible'],
	data() {
		return {
			// 遮罩层
			loading: true,
			//数据列表
			userList: null,
			// 搜索参数
			queryParams: {
				page: 1,
				limit: 10,
				title: undefined,
				status: undefined,
				classifyId: undefined,
			},
			// 总条数
			total: 0,
			//类型下拉框数据
			classifyOptions: [],
			//创建时间数据
			dateRange: [],
			// 列信息
			columns: [
				{ key: 0, label: `编号`, visible: true },
				{ key: 1, label: `分类`, visible: true },
				{ key: 2, label: `标题`, visible: true },
				{ key: 3, label: `状态`, visible: true },
				{ key: 4, label: `访问量`, visible: true },
				{ key: 5, label: `显示顺序`, visible: true },
				{ key: 6, label: `作者`, visible: true },
				{ key: 7, label: `创建时间`, visible: true },
				{ key: 8, label: `操作`, visible: true },
			],
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
		};
	},
	computed: {},
	watch: {
		dateRange(newValue, oldValue) {
			console.log(typeof newValue[0]);
		},
	},
	created() {
		this.getListData();
		this.getClassifyData();
	},
	mounted() {},
	methods: {
		//获取列表数据
		getListData() {
			listData(this.queryParams).then((response) => {
				this.userList = response.data;
				this.total = response.count;
				this.loading = false;
			});
		},
		//获取资讯类型数据
		getClassifyData() {
			classifyData().then((response) => {
				this.classifyOptions = response.data;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			//this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = [];
			this.resetForm('queryForm');
			//this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.userId);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},
		//打开资讯分类
		showArticleClassify() {
			this.$refs.ArticleClassify.show();
		},
		//打开上传附件
		showUploadAttachments() {
			this.$refs.UploadAttachments.show();
		},
		//跳转发布资讯页面
		showReleaseArtcle() {
			this.$router.push({
				path: '/mall/releaseArticle',
				query: {},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.allDiv {
	width: 100%;
	.text {
		font-size: 14px;
	}
	.cardButton {
		float: right;
		margin-right: 10px;
		.icon {
			font-size: 20px;
			margin-left: 10px;
		}
	}
	.box-card {
		margin: 10px 10px;
		.circle {
			// 设置圆点的宽、高、背景颜色，再设置圆点半径所占百分比
			width: 10px;
			height: 10px;
			border-radius: 50%;
			// 设置圆点与其后面的内容水平显示
			display: inline-block;
			margin-right: 5px;
		}
	}
}
</style>
